<template>
	<div id="app" class="edit_dev">
		<el-cascader popper-class="areaBG" size="large" :options="data.options" v-model="data.selectedOptions"
			:disabled="data.disabled" @change="handleChange" placeholder="选择地址">
		</el-cascader>
	</div>

</template>

<script>
	import {
		provinceData,
		regionData,
		provinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from 'element-china-area-data'
	import {
		defineComponent,
		reactive,
		onMounted,
		ref,
		watch,
		computed
	} from 'vue'
	export default defineComponent({
		props: ['area', 'disabled'],
		setup(props, ctx) {
			console.log("provinceAndCityDataPlus>>>>>>>>>>>>>>>", JSON.stringify(provinceAndCityDataPlus));
			let province = computed(() => {
				let dd = []
				provinceAndCityDataPlus.forEach(item => {
					dd.push({
						value: item.value,
						label: item.label
					})
				})
				return dd
			})

			const data = reactive({
				options: province,
				selectedOptions: [],
				disabled: props.disabled
			})
			onMounted(() => {

				if (props.area && props.area.length > 0) {
					data.selectedOptions = [props.area[0].value]

				}
			})

			watch(
				() => props.area,
				(count, prevCount) => {
					/* ... */

					// if(props.area && props.area.length==2)
					// {
					// 	data.selectedOptions=[TextToCode[props.area[0]]['code'],props.area[1]==undefined?0:TextToCode[props.area[0]][props.area[1]]['code']]
					// }
				}
			)

			const handleChange = (value) => {
				console.log('value', JSON.stringify(value))

				let area = []
				value.forEach(item => {

					area.push({
						label: CodeToText[item],
						value: item
					})
				})
				console.log('varae', area)
				ctx.emit('update:area', area)
			}
			return {
				data,
				handleChange
			}
		}

	})
</script>

<style>
	.areaBG {}

	/* .el-cascader-panel {

		background: #ffffff;
	} */
</style>
